<template>
	<view class="page_box">
		<navBar>
			<template @click="backPage()" slot="left">
				<u-icon name="arrow-left" color="#fff"></u-icon>
			</template>
			<template class="centerText" slot="center">
				<view class="" style="color: #fff">盘点记录</view>
			</template>
		</navBar>
		<view class="content_box">
			<!-- <view class="top_box"> -->
			<!-- <view class="btn" @click="add()">
					新增
				</view> -->
			<!-- <view class="ipt_box"> -->
			<!-- <u-icon name="scan" color="#2979ff" size="28"></u-icon> -->
			<!-- <input v-model="pageInfo.goods_name" @input="searchGoods()" placeholder="输入关键字查找记录" type="text" /> -->
			<!-- </view> -->
			<!-- <view @click="close()" class="text_box">
					选好了
				</view> -->
			<!-- </view> -->
			<view class="empty_box" v-if="cargoInventoryRecordList.length == 0">
				<u-empty text="暂无记录"></u-empty>
			</view>
			<view v-else class="goods_list">
				<view class="record_item" v-for="item,index in cargoInventoryRecordList" :key="item.id">
					<view class="record_info">
						<view class="left_info">
							<view class="record_box">
								<u-icon size="18" color="#30a3df" name="file-text"></u-icon>
								<view class="record_no">
									{{item.check_no}}
								</view>
							</view>
							<view class="person">
								<u-icon size="18" color="#ff7c4c" name="account"></u-icon>
								<view class="person_name">
									{{item.update_by}}
								</view>
							</view>
						</view>
						<view class="">
							<!-- <view class="right_info">
								{{item.shipment_type | parserOutType }}
							</view>
							<view class="status_info">
								{{item.shipment_status | parserReceiveType }}
							</view> -->
						</view>
					</view>
					<!-- <view class="total_box">
						<view class="total_num">
							总数量: {{item.quantity}}
						</view>
						<view class="total_price">
							总金额: ￥{{item.amount}}
						</view>
					</view> -->
					<view class="date_details">
						<view class="date_box">
							{{item.update_time}}
						</view>
						<!-- <view @click="goDetailPage(item)" class="detail_box">
							详情
						</view> -->
					</view>
				</view>
				<pagination :status="status" @refreshList='getCargoInventoryRecordList()'
					@changeStatus='handelChangeStatus()'>
				</pagination>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue';
	import pagination from '@/components/pagination.vue'
	import {
		getCargoInventoryRecordListApi
	} from '@/api/categoryManage.js'
	export default {
		data() {
			return {
				cargoInventoryRecordList: [],
				pageInfo: {
					ware_id: this.$store.state.user.stashInfo.ware_id,
					page: 1,
					pageSize: 30
				},
				status: 'loadmore'
			};
		},
		components: {
			navBar,
			pagination
		},
		mounted() {
			this.getCargoInventoryRecordList()
		},
		methods: {
			backPage() {
				uni.navigateBack();
			},
			goDetailPage(item) {
				const jsonDate = JSON.stringify(item)
				uni.navigateTo({
					url: `/commonToolPages/outRecordDetails/outRecordDetails?info=${jsonDate}`
				})
			},
			//获取盘点记录
			async getCargoInventoryRecordList() {
				const {
					data: {
						data: {
							list,
							count
						}
					}
				} = await getCargoInventoryRecordListApi(this.pageInfo)
				this.cargoInventoryRecordList = [...this.cargoInventoryRecordList, ...list]
				this.pageInfo.page++
				if (this.cargoInventoryRecordList.length == count) {
					this.status = 'nomore'
				} else {
					this.status = 'loadmore'
				}
			},
			handelChangeStatus() {
				this.status = 'loading'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_box {
		background-color: #f3f4f6;
		min-height: 100vh;

		.content_box {
			// background-color: #fff;
			// margin: 20rpx 10rpx;
			// border-radius: 20rpx;
			// padding-bottom: 10rpx;
			// height: 1300rpx;

			.top_box {
				display: flex;
				justify-content: center;
				font-size: 26rpx;
				padding: 20rpx;
				background-color: #fff;

				.btn {
					width: 120rpx;
					height: 70rpx;
					background-color: #39cccc;
					color: #fff;
					text-align: center;
					line-height: 70rpx;
					border-radius: 35rpx;

				}

				.ipt_box {
					display: flex;
					align-items: center;
					width: 500rpx;
					height: 70rpx;
					padding: 0 20rpx;
					background-color: #f2f2f2;
					border-radius: 35rpx;
					box-sizing: border-box;

					input {
						margin-left: 20rpx;
						width: 450rpx;
					}
				}

				.text_box {
					color: #60aeff;
					line-height: 70rpx;
				}
			}

			.goods_list {
				// height: 1300rpx;
				overflow: auto;
				padding-bottom: 50rpx;
				box-sizing: border-box;

				.record_item {
					background-color: #fff;
					padding: 20rpx;
					margin: 10rpx;
					border-radius: 20rpx;

					.record_info {
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #f5f5f5;
						padding-bottom: 20rpx;

						.left_info {
							.record_box {
								display: flex;
								margin-bottom: 10rpx;

								.record_no {
									margin-left: 10rpx;
									font-size: 25rpx;
								}
							}

							.person {
								display: flex;

								.person_name {
									margin-left: 10rpx;
								}
							}
						}

						.right_info {
							width: 120rpx;
							height: 50rpx;
							background-color: #3c9cff;
							font-size: 25rpx;
							color: #fff;
							text-align: center;
							line-height: 50rpx;
							border-radius: 70rpx;
						}

						.status_info {
							width: 120rpx;
							height: 50rpx;
							background-color: #f57b88;
							font-size: 25rpx;
							color: #fff;
							text-align: center;
							line-height: 50rpx;
							border-radius: 70rpx;
							margin-top: 10rpx;
						}

					}

					.total_box {
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0;
						font-weight: 600;
						font-size: 28rpx;

						.total_num {}

						.total_price {

							color: #f57b88;
						}
					}

					.date_details {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #90a0c3;


						.date_box {
							font-size: 25rpx;

						}

						.detail_box {
							width: 120rpx;
							height: 50rpx;
							// background-color: #3c9cff;
							font-size: 25rpx;

							text-align: center;
							line-height: 50rpx;
							border-radius: 70rpx;
							border: 1px solid #90a0c3;
						}

					}

				}
			}

		}

		.empty_box {
			margin: 300rpx 0;
		}
	}
</style>